<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改个人信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/fonts/line-icons.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
</head>
<body>
<div class="container-fluid">
    <div class="breadcrumb-wrapper row">
        <div class="col-12 col-lg-3 col-md-6">
            <h4 class="page-title">修改个人信息</h4>
        </div>
        <div class="col-12 col-lg-9 col-md-6">
            <ol class="breadcrumb float-right">
                <li class="active">个人信息</li>
                <li class="active"> / 修改个人信息</li>
            </ol>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12 grid-margin">
            <div class="card">
                <div class="card-header border-bottom">
                    <h4 class="card-title">个人资料修改</h4>
                </div>
                <div class="card-body">
                    <form class="form-sample">
                        <p class="card-description">个人信息</p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">账号</label>
                                    <div class="col-sm-9">
                                        <input id="username" type="text" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">昵称</label>
                                    <div class="col-sm-9">
                                        <input id="nickname" type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">个性签名</label>
                                    <div class="col-sm-9">
                                        <input id="introduce" type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3">性别</label>
                                    <div class="col-sm-4">
                                        <div class="custom-control custom-radio radio custom-control-inline">
                                            <input type="radio" class="custom-control-input" name="sex" id="male" value="男">
                                            <label class="custom-control-label" for="male">男</label>
                                        </div>
                                    </div>
                                    <div class="col-sm-5">
                                        <div class="custom-control custom-radio radio custom-control-inline">
                                            <input type="radio" class="custom-control-input" name="sex" id="gender" value="女">
                                            <label class="custom-control-label" for="gender">女</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row" id="schoolDiv">
                                    <label class="col-sm-3 col-form-label">学校</label>
                                    <div class="col-sm-9">
                                        <input id="school" type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row" id="facultyDiv">
                                    <label class="col-sm-3 col-form-label">学院</label>
                                    <div class="col-sm-9">
                                        <input id="faculty" type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row" id="userClassDiv">
                                    <label class="col-sm-3 col-form-label">班级</label>
                                    <div class="col-sm-9">
                                        <input id="class" type="text" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="text-center">
                                    <img id="profilePhoto" src="" alt='user-img' class='img-circle' width="400px" height="400px" style='border-radius:50%'/>
                                </div>
                                <div class="text-center" style="margin: 10px">
                                    <input type="file" accept="image/*" id="file"/>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <input class="btn btn-common mr-3" id="sureButton" value="确认"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="updateModal" class="modal hide fade in" style="display: none;">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-body">
				<div class="text-center">
					修改学校信息需要重新审核，是否确认修改？
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
				<input type="button" class="btn btn-danger" id="sureUpdate" value="确定"/>
			</div>
		</div>
	</div>
</div>
<script src="../assets/js/jquery-min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script>
	var ctx = window.parent.ctx;
    var user = window.parent.user;
    $(function () {
        $("#username").val(user.username);
        $("#profilePhoto").attr("src", user.profilePhoto);
        $("#nickname").val(user.nickname);
        $("#introduce").val(user.introduce);
        if(user.sex=='男'){
            $("#male").prop("checked", true);
            $("#gender").prop("checked", false);
        }else{
            $("#male").prop("checked", false);
            $("#gender").prop("checked", true);
        }
        $("#school").val(user.school);
        $("#faculty").val(user.faculty);
        $("#class").val(user.userClass);
		
		if(user.role==1){
			$("#userClassDiv").hide();
		}else if(user.role==2){
			$("#facultyDiv").hide();
			$("#userClassDiv").hide();
		}

        $("#sureButton").click(function () {
			if($("#school").val()!=user.school || $("#faculty").val()!=user.faculty || $("#class").val()!=user.userClass){
				console.log("开启模态框");
				$("#updateModal").modal("show");
			}else{
				update();
			}
        })
		
		$("#sureUpdate").click(function(){
			update();
		})
    })
	
	function update(){
		var formData = new FormData();
		formData.append("file",$("#file")[0].files[0]);
		formData.append("nickname",$("#nickname").val());
		formData.append("introduce",$("#introduce").val());
		formData.append("sex",$('input:radio:checked').val());
		formData.append("school",$("#school").val());
		formData.append("faculty",$("#faculty").val());
		formData.append("userClass",$("#class").val());
		$.ajax({
		    url: ctx+"/user/editProfile",
		    type: "POST",
		    data: formData,
			xhrFields: {
			    withCredentials: true
			},
		    processData: false,
		    contentType: false,
		    success: function (data) {
		        sessionStorage.setItem("user", JSON.stringify(data));
		        window.parent.location.reload();
		    }
		});
	}
</script>
</body>
</html>